﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>美淘网会员登录</title>
<link href="css/global.css"  type="text/css" rel="stylesheet" />
<link href="css/login.css" type="text/css" rel="stylesheet" />
<style type="text/css"></style>
<script type="text/javascript">
	
	function $(id){
		return document.getElementById(id);
	}
	
	//验证用户名*
	function checkName(){
		var nameInfo=$("txtName").value;
		$("txtName").style.borderColor="#a5afc3";
		var spanObj=$("spanName");
		if(nameInfo==""){
			spanObj.innerHTML="请输入用户名";
			return false;
		}
		if(nameInfo.length<4||nameInfo.length>16){
			spanObj.innerHTML="用户名的长度在4到16之间";
			return false;
		}
		for(var i=0;i<nameInfo.length;i++){
			var content=nameInfo.substring(i,i+1);
			if(!isNaN(content)){
				spanObj.innerHTML="用户名中不能包含数字";
				return false;
			}
		}
		spanObj.innerHTML="正确";
		return true;
	}
	//验证密码
	function checkPwd(){
		var pwdInfo=$("txtPwd").value;
		$("txtPwd").style.borderColor="#a5afc3";
		var spanObj=$("spanPwd");
		var pwdConfirm=$("txtConfirm").value;
		var spanConfirm=$("spanConfirm");
		if(pwdInfo==""){
			spanObj.innerHTML="请输入密码";
			return false;
		}
		if(pwdInfo.length<6||pwdInfo.length>32){
			spanObj.innerHTML="密码的长度必须在6和32位之间";
			return false;
		}
		spanObj.innerHTML="密码正确";
		 if(pwdInfo!=pwdConfirm){
			spanConfirm.innerHTML="两次输入的密码不一致";
			return false;
		}
		return true;
	}
	function checkConfirm(){
		var pwdInfo=$("txtPwd").value;
		var pwdConfirm=$("txtConfirm").value;
		var spanConfirm=$("spanConfirm");
		$("txtConfirm").style.borderColor="#a5afc3";
	    if(pwdInfo!=pwdConfirm){
			spanConfirm.innerHTML="两次输入的密码不一致";
			return false;
		}
		spanConfirm.innerHTML="输入一致";
		return true;
	}
	function lightTxt(obj){
		obj.style.borderColor="red";
	}
    function checkForm(){
		if(checkEmail()&&checkName()&&checkPwd()&&checkConfrim()){
             return true;
		}
        return false;
    }
    function enter() {
        // 获取用户输入的账号
        let tel = document.getElementById("tel2").value;
        console.log(tel);
        // 获取用户输入的密码
        let pas = document.getElementById("pas2").value;
        console.log(pas);
        // 判断本地是否有数据 如果没有数据直接提示未注册
        if (localStorage.length == 0) {
            alert("您还未注册")
        } else {
            let teldata = [] // 创建一个数组   用于存储本地所有已存储的手机号
            let pasdata = [] // 创建一个数组   用于存储本地所有已存储的密码
            let iddata = [] // 创建一个数组   用于存储本地所有已存储的id
            // 循环判断本地是否有次手机号
            for (let i = 0; i < localStorage.length; i++) {
                // 获取所有的key钥匙
                let key = localStorage.key(i)
                console.log(key);
                // 通过key拿到对应的数据进行判断
                let keydata = localStorage.getItem(key); // 拿到对应数据  只不过这时候是字符串
                let keyinfo = JSON.parse(keydata) 
                console.log(keyinfo);
                teldata[i] = keyinfo.tel
                pasdata[i] = keyinfo.pas
                iddata[i] = keyinfo.id
            }
            console.log(teldata);
            console.log(pasdata);
            console.log(iddata);
            // 判断此手机号是否注册
            if (teldata.indexOf(tel) < 0) { 
                alert("此账号未注册")
            } else {
                let index = teldata.indexOf(tel) // 返回对应手机号的下标
                if (pasdata[index] != pas) {
                    alert("密码错误")
                } else {
                    console.log(iddata[index]);
                    setTimeout(function () {
                        window.location.href = "index_1.html?" + iddata[index]
                    }, 2000);
                    alert("登录成功,点击后跳转到首页")
                }
            }
        }
    }

    function affirm() {
        // 获取昵称
        let name = document.getElementById("name").value;
        console.log(name);
        // 获取手机号
        let tel = document.getElementById("tel").value;
        console.log(tel);
        // 获取密码
        let pas = document.getElementById("password").value;
        console.log(pas);
        // 获取确认密码
        let affpas = document.getElementById("affirmPassword").value;
        console.log(affpas);
        // 手机号正则表达式
        let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (localStorage.length == 0) { // 判断本地是否有数据  没有的话判断手机号和密码
            if (pas != affpas) {
                alert("第二次输入的密码不相同")
            } else if (!myreg.test(tel)) {
                alert("手机号格式不对")
            } else {
                // 动态向本地添加数据
                let dataLength = localStorage.length // 获取现在已有数据的长度  这个长度用于拼接到本地存储的每个key值中  达到一个动态存储的效果  每条本地存储数据需要一个钥匙   也就是获取这条数据的名称  就是key
                console.log(dataLength);
                // 创建一个对象用于存储用户输入的数据
                let data = {}
                data.name = name; // 向对象添加昵称
                data.tel = tel // 向对象添加手机号
                data.pas = pas // 添加密码
                data.id = dataLength // 添加用户唯一凭证ID
                let info = JSON.stringify(data) // 将对象转化为字符串   因为本地存储只能存储字符串
                console.log(info);
                // 向本地存储数据   第一个参数就是key钥匙  第二个是我们要存储的数据
                localStorage.setItem("key" + dataLength, info);
                // 获取本地存储所有数据 查看是否存到本地
                console.log(localStorage.valueOf());
                // 当存储成功时  启动定时器   两秒钟后跳转到登录页面
                setTimeout(function () {
                    window.location.href = "login.html"
                }, 2000)
                alert("存储成功,点击后跳转到登录页面")
            }
        } else {
            for (let i = 0; i < localStorage.length; i++) {
                // 获取所有的key钥匙
                let key = localStorage.key(i)
                console.log(key);
                // 通过key拿到对应的数据进行判断
                let keydata = localStorage.getItem(key); // 拿到对应数据  只不过这时候是字符串
                let keyinfo = JSON.parse(keydata) // 将字符串转化为对象的形式
                console.log(keyinfo);
                // 判断用户输入的信息是否存在
                if (keyinfo.name == name) { // 判断本地存储的数据中是否有相同的昵称
                    alert("昵称已存在")
                    break;
                } else if (keyinfo.tel == tel) { // 判断本地存储的数据中是否有相同的手机号
                    alert("手机号已注册")
                    break;
                } else if (pas != affpas) { // 判断两次输入的密码是否相同
                    alert("第二次输入的密码不相同")
                    break;
                } else if (!myreg.test(tel)) { // 判断手机号的格式
                    alert("手机号格式不对")
                    break;
                } else {
                    // 动态向本地添加数据
                    let dataLength = localStorage.length // 获取现在已有数据的长度  这个长度用于拼接到本地存储的每个key值中  达到一个动态存储的效果  每条本地存储数据需要一个钥匙   也就是获取这条数据的名称  就是key
                    console.log(dataLength);
                    // 创建一个对象用于存储用户输入的数据
                    let data = {}
                    data.name = name; // 向对象添加昵称
                    data.tel = tel // 向对象添加手机号
                    data.pas = pas // 添加密码
                    data.id = dataLength // 添加用户唯一凭证ID
                    let info = JSON.stringify(data) // 将对象转化为字符串   因为本地存储只能存储字符串
                    console.log(info);
                    // 向本地存储数据   第一个参数就是key钥匙  第二个是我们要存储的数据
                    localStorage.setItem("key" + dataLength, info);
                    // 获取本地存储所有数据 查看是否存到本地
                    console.log(localStorage.valueOf());
                    // 当存储成功时  启动定时器   两秒钟后跳转到登录页面
                    setTimeout(function () {
                        window.location.href = "login.html"
                    }, 2000)
                    alert("存储成功,点击确认")
                    break;
                }
            }
        }
    };
</script>
</head>

<body onload="changeBtn(),changeRegBtn(),initData()">
<iframe src="head.html" width="100%" height="104" scrolling="no" frameborder="0">
</iframe>
<div id="middle">
  <div id="allnav">
    <div id="nav">
      <ul>
        <!--组织一级菜单-->
        <li class="menuList"><a href="#" class="category">全部商品分类</a>
          <ul>
            <li><a href="#">美食</a></li>
            <li><a href="#">旅游</a></li>
            <li><a href="#">酒店</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">KTV</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">生活服务</a></li>
          </ul>
        </li>
        <li><a href="#">首页</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">电影</a></li>
        <li><a href="#">KTV</a></li>
        <li><a href="#">酒店订票</a></li>
        <li><a href="#">购物</a></li>
        <li><a href="#">品牌特卖</a></li>
      </ul>
    </div>
  </div>
  <!--导航结束-->
  <div id="content">
    <div id="register">
      <form>
        <fieldset>
          <legend>注册新用户</legend>
          <ul>
            <li class="current" id="one1" onclick="setTab(1)">注册</li>
            
          </ul>
          <div class="box">
              <div id="emailreg">
                  <p>
                      <label>电话：</label>
                      <input name="" type="number" class="txt" id="tel" />
                      <span>用于登录</span>
                  </p>
                  <p>
                      <label for="userName" accesskey="n">用户名：</label>
                      <input name="name" type="text" class="txt" id="name" onblur="checkName()" onfocus="lightTxt(this)" />
                      <span id="spanName">4-16字符，不能包含数字</span>
                  </p>
                  <p>
                      <label>创建密码：</label>
                      <input name="pass" type="password" class="txt" id="password" onblur="checkPwd()" onfocus="lightTxt(this)" />
                      <span id="spanPwd">6-32位字符</span>
                  </p>
                  <p>
                      <label>确认密码：</label>
                      <input name="pass" type="password" class="txt" id="affirmPassword" onblur="checkConfirm()" onfocus="lightTxt(this)" />
                      <span id="spanConfirm">请再次输入密码</span>
                  </p>

                  <input type="image" class="btn" src="images/register.jpg" name="btnReg" onclick="affirm()"/>

              </div>
               <script src="login.html">
               </script>

          </div>
        </fieldset>
      </form>
    </div>
    <div id="login">
      <form>
        <fieldset>
          <legend>登录</legend>
          <ul>
            <li id="logone1"  class="current">用户登录</li>
          </ul>
          <div class="box">
            <div  id="phone">
              <p>
                <label>手机号：</label>
                <input name="tel2" type="number" id="tel2" class="txt" />
              </p>
              <p>
                <label>密码：</label>
                <input name="pas2" type="password" id="pas2" class="txt"/>
              </p>
              <p>
                <input type="image" src="images/login.jpg" class="btn" name="btnLogin" onclick="enter()"/>
                  
              </p>
              
          
            
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
  <!--中间内容块结束--> 
</div>
<iframe src="foot.html" width="100%"  scrolling="no" frameborder="0" height="185"></iframe>
</body>
</html>
